<template>
    <div>
      <el-checkbox-group
          :max="1"
          v-model="checkAreaDivisions"
          @change="change"
      >
          <el-checkbox 
          v-for="division in areaDivisions" 
          :key="division.id" 
          :label="division.administrationName" 
          :value="division"
          :disabled="division.disabled"
          :checked="division.administrationId==infoArea.myAreaId"
          >
          {{ division.administrationName }}
          </el-checkbox>
    </el-checkbox-group>
    <el-divider v-if="divisions.length>0" />
    <el-checkbox
          v-if="divisions.length>0"
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
      >
         全选
      </el-checkbox>
      <el-checkbox-group
          v-model="checkedDivisions"
          @change="handleCheckedCitiesChange"
      >
          <el-checkbox v-for="division in divisions" :key="division.id" :label="division.administrationName" :value="division">
          {{ division.administrationName }}
          </el-checkbox>
    </el-checkbox-group>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref} from 'vue'
  import apiMod from '@/apiMod/index'

  let emits = defineEmits(['getDivisions'])
  let props = defineProps({
        defaultVal:{
            type:Object,
            default:()=>({})
        }
    })
    // 用于设置默认值
  let infoArea:any = inject("infoArea")
 
  const checkAll = ref(false)
  const isIndeterminate = ref(false)
  const checkedDivisions:any = ref([])
  let checkAreaDivisions = ref([])
  const areaDivisions = ref([])
  let divisions = ref([])

  
  const handleCheckAllChange = (val: boolean) => {
    checkedDivisions.value = val ? divisions.value : []
    isIndeterminate.value = false
    emits('getDivisions',checkedDivisions.value)
  }
  const handleCheckedCitiesChange = (value: string[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === divisions.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < divisions.value.length
    emits('getDivisions',checkedDivisions.value)
  }
  const change = (value) =>{
    if(value.length>0){
        divisions.value = value[0].children
    }else{
        divisions.value = []
    }
    
  }
  // 获取区域信息
  const getAreaInfo = async() =>{
      let params = {
          // isNotShowProvince:true,
          administrationId:11
      }
     let res = await apiMod.sysadministration_getTree(params)
     if(res.code==0){
      if(infoArea.myAreaId){
        res.data[0].children[0].children.forEach(el=>{
          if(infoArea.length>=3){
            el.disabled = true
          }
          
          if(el.administrationId==infoArea.myAreaId){
            divisions.value = el.children
          }
        })
      }
      areaDivisions.value = res.data[0].children[0].children
     }
  }
  getAreaInfo()
  watch(()=>props.defaultVal,(val)=>{
    if(val){
        checkedDivisions.value = val
        handleCheckedCitiesChange(checkedDivisions.value)
    }
})
  </script>
  <style scoped lang="scss">
  </style>